<template>
	<view class="g-dropdown-item":style="{width: labelWidth}" @click="clickDropItem">
		<view class="label-wrap">
			<text class="label">名称</text>
			<span class="iconfont icon-window-down" :class="['label-icon-top','label-icon-bot']"></span>
		</view>
		<view style="height: 500rpx; background: red;"></view>
	</view>
</template>

<script>
import utils from '../../utils/utils.js';
export default {
	name: 'g-dropdown-item',
	data() {
		return {
			dropParent: null
		};
	},
	props: {
		value: '',
		labelWidth: {
			default: String,
			default: '50%'
		}
	},
	computed: {},
	methods: {
		clickDropItem(){
			alert('1')
		},
		init() {
			this.dropParent = utils.findComponents('g-dropdown', this, '$parent');
			this.dropParent.dropChild.push(this);
		}
	},
	created() {}
};
</script>
<style scoped lang="scss">
@import "../../theme.scss";
@import "../../iconfont.css";
.g-dropdown-item {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background: #0051ff;
}
.label-wrap{
	.label{
		font-weight: 400;
		color: red;
		font-size: 32rpx;
	}
	.label-icon{
		&-top{
			color: #0051FF;
		}
		&-bot{
			color: #ebebeb;
		}
	}
}
</style>
